<template>
    <div>
        <Toolbar
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            style="border-bottom: 1px solid #ccc"
        />
        <Editor
            :defaultConfig="editorConfig"
            :mode="mode"
            v-model="valueHtml"
            style="min-height: 80vh"
            @onCreated="handleCreated"
            @onChange="handleChange"
        />
    </div>
</template>

<script setup>
import "@wangeditor/editor/dist/css/style.css";
import {
    onBeforeUnmount,
    ref,
    shallowRef,
    onMounted,
    inject,
    reactive,
    watch,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import cfile from "../utils/UploadFiles.js";

// import { resolve } from 'path';
// import { storeToRefs } from "pinia";
const SparkMD5 = inject("SparkMD5");
const axios = inject("axios");
// const epStore = inject("epStore");
const server_url = inject("server_url");
// 编辑器实例，必须用 shallowRef，重要！
// shallowRef只有第一层key是响应式的
const editorRef = shallowRef();
const toolbarConfig = {
    excludeKeys: ["uploadVideo"],
}; // 默认配置
const editorConfig = { placeholder: "请输入内容..." }; // 默认内容
const mode = ref("default");
const valueHtml = ref("");

// console.log(server_url);

// 接收父组件传来的文章信息
const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
});
// 使用flag 只是监听一次
let flag = 1;
watch(
    props,
    (newValue, oldValue) => {
        console.log("newValue", newValue);
        if (flag !== 0) {
            flag = 0;
            valueHtml.value = newValue.modelValue;
        }
    },
    { deep: true }
);

const emit = defineEmits(["update:model-value"]); // emit需要在后部声明要抛出的事件

// editorConfig.MENU_CONF['uploadImage'] = {
//     // 自定义插入图片
//     customInsert(res, insertFn) {                  // JS 语法
//         // res 即服务端的返回结果

//         // 从 res 中找到 url alt href ，然后插入图片
//         insertFn(url, alt, href)
//     },
// }
// var File_Path = []

// let File_Path = reactive({
//     arr: []
// })

editorConfig.MENU_CONF = {};
editorConfig.MENU_CONF["uploadImage"] = {
    // 自定义上传
    async customUpload(file, insertFn) {
        // 这里可以拿到文件
        // console.log(file);
        cfile.selectFilesDirect(file); // 获取文件
        cfile.uploadFile(() => {
            getImg(insertFn);
            // cfile.File_Path = [];
            // cfile.user_files = [];
        });
    },
};

function getImg(insertFn) {
    // console.log(" cfile.File_Path",  cfile.File_Path);
    // console.log(server_url);
    let url = server_url + "/public/upload/" + cfile.File_Path[0];
    let alt = null;
    let href = null;
    // console.log("url", url);
    // file 即选中的文件
    // 自己实现上传，并得到图片 url alt href
    // 最后插入图片
    insertFn(url, alt, href);
}

// 上传图片
// editorConfig.MENU_CONF = {}
// editorConfig.MENU_CONF['uploadImage'] = {
//     // base64LimitSize: 10 * 1024,  // base64 有bug
//     server: server_url + "/upload/_token/rich_editor_upload",

//     // 向服务端发送token
//     headers: {
//         token: adminstore().token
//     }
// }
// 插入图片
// editorConfig.MENU_CONF['insertImage'] = {
//     parseImageSrc: (src) => {
//         if (src.indexOf("http") !== 0) {
//             return `${server_url}${src}`
//         }
//         return src
//     }
// }

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;

    editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor) => {
    // console.log('created', editor);
    editorRef.value = editor; // 记录 editor 实例，重要！
};

// 如果存在内容则抛出
const handleChange = (editor) => {
    if (delHtmlTag(valueHtml.value)) {
        emit("update:model-value", valueHtml.value);
    }
};

function delHtmlTag(str) {
    return str.replace(/<[^>]+>/g, ""); //去掉所有的html标记
}

// 文件传输逻辑

// // 获取文件 么问题
// const selectFiles = (file) => {
//     cfile.selectFilesDirect(file)
// }

// // 上传文件 上传完毕后执行回调
// const uploadFile = () => {
//     cfile.uploadFile(() => {
//         // 在每次上传了文件都会执行回调

//         // 有待优化

//         File_Path.arr.push(cfile.File_Path[0])
//         cfile.user_files = []
//     })
// }

// // 文件目录
// var File_Path = []

// // 获取文件
// const token = localStorage.getItem("TOKEN")
// // var user_id = "114514";
// var user_files = []
// function selectFiles(f) {
//     user_files.push(f);
// }

// // 创建文件hash
// function createFileHash(file, file_name) {

//     // 处理抽样hash切片大小!!!!!!!!!!!!!!
//     const hash_chunk = 512;

//     return new Promise((resolve, reject) => {
//         const spark = new SparkMD5.ArrayBuffer()
//         const reader = new FileReader()
//         reader.readAsArrayBuffer(file)

//         reader.addEventListener("loadend", () => {
//             const content = reader.result  // 读取结果

//             // 切片hash 取前十个字符
//             for (let i = 0; hash_chunk * i < file.size; i++) {
//                 spark.append(content.slice(hash_chunk / 2 * i, hash_chunk / 2 * i + 10))  // 向md5添加读取结果
//             }
//             const hash = spark.end()  // 获取hash
//             resolve(hash, content)
//         })

//         reader.addEventListener('error', function _error(err) {
//         reject(err)
//         })
//     })
// }

// // 异步并发
// function sendRequest(arr, callback) {

//     let max_index = 5  // 设置最大执行数量
//     let arr_index = 0
//     let req_arr = []

//     let endReq = () => {

//         // 异步任务执行至最后 结束并发
//         if (arr_index === arr.length) {
//             return Promise.resolve()
//         }

//         let req_msg = arr[arr_index++]

//         // 发送事件
//         let res_msg = axios.post(req_msg[0], req_msg[1], req_msg[2]);
//         res_msg.then((res) => {  // 在此处获得res

//             // 单文件的料理方式
//             if (res.data.file_path) {
//                 // console.log(res.data.file_path);
//                 // console.log(res.data.msg);
//                 File_Path.push(res.data.file_path)
//                 // console.log(" File_Path[0]",  File_Path[0]);
//             } else if (res.data.msg !== "Cool" && arr_index === 1) {
//                 console.log(res.data.msg);
//             };
//             // 在此处可以协调进行断点重发？

//             req_arr.splice(req_arr.indexOf(res_msg), 1)  // 移除发送完毕的请求
//         }).catch((error) => {
//             console.log("发送失败", error);
//         });
//         req_arr.push(res_msg)

//         // 如果并发数量达到上限则等待其中一个完成再添加
//         let promise = Promise.resolve()
//         if (req_arr.length >= max_index) {
//             promise = Promise.race(req_arr)
//         };

//         // 递归执行endReq()
//         return promise.then(() => endReq())
//     }

//     endReq().then(() => {
//         // 全部执行完成执行回调函数
//         Promise.all(req_arr).then(() => {
//             callback()
//         }).catch((error) => {
//             console.log("请求错误 请重新登录", error);
//         })
//     })
// }

// // 文件上传回调
// function after_uploadFile(file_hash, chunk_num, callback) {
//     let url = "/upload/merge";
//     let req_msg = {
//         "file_hash": file_hash,
//         "chunk_num": chunk_num,
//     }
//     let headers = {
//         'authorization': token
//     }

//     // 大文件切片的料理方式
//     axios.post(url, req_msg, {headers: headers}).then((res) => {
//         if (res.data.file_path) {
//             console.log(res.data.file_path);
//             File_Path.push(res.data.file_path);
//         }
//         console.log(res.data.msg);
//         callback()
//         return ;
//     }).catch((error) => {
//         console.log(error);
//         return ;
//     });
// }

// // 文件上传
// function uploadFile(callback) {
//     let chunk_size = 1024 * 1024 * 5;  // 5Mb分块
//     let max_chunk = 5242880;  // 最大不分块大小 5242880字节 5Mb
//     let url = "/upload";
//     let headers = {
//         'Content-Type': 'multipart/form-data',
//         'authorization': token
//     }

//     for (let f of user_files) {

//         let file_self = f;
//         let file_name = f.name
//         let file_size = f.size
//         let file_hash = null;
//         let file_arr = [];
//         let chunk_msg = []

//         if (file_size < max_chunk) {
//             // 直接发送
//             createFileHash(file_self, file_name).then(hash => {
//                 // 获取文件hash
//                 let form_data = new FormData();
//                 // form_data.append("user_id", user_id)
//                 form_data.append("file_name", file_name)
//                 form_data.append("file_hash", hash);
//                 form_data.append("file_index", "0")
//                 form_data.append("file", file_self)  // file 要放在最后 multer的文件捕获会截取file之前的form

//                 chunk_msg.push(url, form_data, { headers: headers })
//                 // 文件信息表
//                 file_arr.push(chunk_msg)
//                 chunk_msg = [];
//                 // 异步并发 结束执行回调 单文件不进行合并请求
//                 sendRequest(file_arr, () => {callback()})  // 回调函数内不能传参数
//             })

//         } else {
//             // 切片发送
//             let file_index = 0;

//             createFileHash(file_self, file_name).then(hash => {
//                 // 获取文件hash
//                 for (let start_size = 0; start_size < file_size; start_size += chunk_size) {
//                     let blob = null;

//                     // 文件切片
//                     if (start_size + chunk_size > file_size) {
//                         // 末切片
//                         blob = file_self.slice(start_size, file_size);
//                     } else {
//                         blob = file_self.slice(start_size, chunk_size * (file_index + 1));
//                     }

//                     let file_ext = file_name.substring(file_name.lastIndexOf(".") + 1)
//                     let blob_name = file_index + "-" + file_hash + "." + file_ext

//                     // 新建文件？
//                     let blob_file = new File([blob], blob_name);
//                     let form_data = new FormData();

//                     // form_data.append("user_id", user_id)
//                     form_data.append("file_name", file_name)
//                     form_data.append("file_hash", hash)
//                     form_data.append("file_index", file_index + "")
//                     form_data.append("file", blob_file)

//                     chunk_msg.push(url, form_data, { headers: headers })
//                     // 文件信息表
//                     file_arr.push(chunk_msg)
//                     chunk_msg = [];

//                     file_index += 1;
//                 }
//                 // 获取文件切片数
//                 let chunk_num = file_index;

//                 // 异步并发 结束执行回调
//                 sendRequest(file_arr, () => after_uploadFile(hash, chunk_num, callback))
//             })
//         }
//     }
// }
</script>

<style lang="scss" scoped></style>
